<!DOCTYPE html>
<html>

<head>
    <title>登录-履保E家-商城后台系统</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/css/login.css?v=${constants.getReleaseVersion()}" media="all">
    <style>
        body {
            background-image: url("${ctxPath}/assets/common/images/back1.jpg");
            background-position: initial;
            background-repeat: no-repeat;
            background-size: cover;
            background-color: #f0f2f5;
        }

        .login-header {
            color: rgba(0, 0, 0, .85) !important;
        }

        .login-footer {
            color: rgba(0, 0, 0, 0.7) !important;
        }

        .login-footer a {
            color: rgba(0, 0, 0, 0.7) !important;
        }

        .login-footer a:hover {
            color: rgba(0, 0, 0, 0.4) !important;
        }

        /**
*
*
*/

        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #CECFD2; opacity:1;
        }

        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #CECFD2;opacity:1;
        }

        input:-ms-input-placeholder{
            color: #CECFD2;opacity:1;
        }

        input::-webkit-input-placeholder{
            color: #CECFD2;opacity:1;
        }

        h1 {
            font-size: 2.8em;
            font-weight: 700;
            letter-spacing: -1px;
            margin: 0.6rem 0;
        }
        h1 > span {font-weight: 300; }
        h2 {
            font-size: 1.15em;
            font-weight: 300;
            margin: 0.3rem 0;
        }
        main {
            width: 95%;
            max-width: 1000px;
            margin: 4em auto;
            opacity: 0;
        }
        main.loaded {transition: opacity .25s linear;opacity: 1; }
        main header {width: 100%; }
        main header > div {width: 50%; }
        main header > .left, main header > .right {height: 100%; }
        main .loaders {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            flex: 0 1 auto;
            flex-direction: row;
            flex-wrap: wrap;
        }
        main .loaders .loader {
            box-sizing: border-box;
            display: flex;
            flex: 0 1 auto;
            flex-direction: column;
            flex-grow: 1;
            flex-shrink: 0;
            flex-basis: 25%;
            max-width: 25%;
            height: 200px;
            align-items: center;
            justify-content: center;
        }
        .J_codeimg
        {
            width: 85px;
            height: 36px;
            padding: 3px;
            z-index: 0;
            color:#FFF;
        }

        body ::-webkit-input-placeholder {
            color: #4E546D;
        }
        body .authent {
            box-shadow: 0px 20px 30px 3px rgba(0, 0, 0, 0.55);
            display: none;
            background: #35394a;
            /* Old browsers */
            /* FF3.6+ */

            /* Chrome10+,Safari5.1+ */
            /* Opera 11.10+ */
            /* IE10+ */
            background: linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%);
            /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(53, 57, 74, 0)', endColorstr='rgb(0, 0, 0)',GradientType=1 );
            /* IE6-9 fallback on horizontal gradient */
            position: absolute;
            left: 0;
            right: 90px;
            margin: auto;
            width: 100px;
            color: white;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-align: center;
            padding: 20px 70px;
            top: 200px;
            bottom: 0;
            height: 70px;
            opacity: 0;
        }
        body .authent p {
            text-align: center;
            color: white;
        }
        body .success {
            display: none;
            color: #d5d8e2;
        }
        body .success p {
            font-size: 14px;
        }
        body p {
            color: #D3D7F7;
            font-size: 10px;
            text-align: left;
        }
        body .testtwo {
            left: -320px !important;
        }
        body .test {
            box-shadow: 0px 20px 30px 3px rgba(0, 0, 0, 0.55);
            pointer-events: none;
            top: -100px !important;
            -webkit-transform: rotateX(70deg) scale(0.8) !important;
            transform: rotateX(70deg) scale(0.8) !important;
            opacity: .6 !important;
            -webkit-filter: blur(1px);
            filter: blur(1px);
        }
        body .login
        {
            /*background-image: url("${ctxPath}/assets/common/images/back3.png");*/
            /*background-size: cover;*/
            opacity: 1;
            top: 20px;
            -webkit-transition-timing-function: cubic-bezier(0.68, -0.25, 0.265, 0.85);
            -webkit-transition-property: -webkit-transform,opacity,box-shadow,top,left;
            transition-property: transform,opacity,box-shadow,top,left;
            -webkit-transition-duration: .5s;
            transition-duration: .5s;
            -webkit-transform-origin: 161px 100%;
            -ms-transform-origin: 161px 100%;
            transform-origin: 161px 100%;
            -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
            position: relative;
            width: 320px;
            /*border-top: 2px solid #D8312A;*/
            height: 50vh;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            top: 0;
            bottom: 0;
            padding: 0px 40px 40px 40px;
            /* Old browsers */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(53, 57, 74, 0)', endColorstr='rgb(0, 0, 0)',GradientType=1 );
            /* IE6-9 fallback on horizontal gradient */
        }
        body .login .validation {
            position: absolute;
            z-index: 1;
            right: 10px;
            top: 14px;
            opacity: 0;
        }
        body .login .disclaimer {
            position: absolute;
            bottom: 20px;
            left: 35px;
            width: 250px;
        }
        body .login_title {
            color: #D3D7F7;
            text-align: left;
            font-size: 26px;
            margin-bottom: 50px;
        }
        body .login_fields {
            position: absolute;
            left: 0;
        }
        body .login_fields .icon {
            position: absolute;
            z-index: 1;
            left: 20px;
            top: -1px;
        }
        body .login_fields input[type='password'],body .login_fields input[type='text'] {
            color: #FFFFFF !important;
        }
        body .login_fields input[type='text'], body .login_fields input[type='password'] {
            color: #afb1be;
            width: 400px;
            margin-top: -2px;
            background: rgba(57, 61, 82, 0);
            left: 0;
            border-top: 2px solid rgba(57, 61, 82, 0);
            border-bottom: 2px solid rgba(57, 61, 82, 0);
            border-right: none;
            border-left: none;
            outline: none;
            font-family: 'Gudea', sans-serif;
            box-shadow: none;
            height: 50px;
            padding-left: 50px;
            line-height: 50px;
        }
        body .login_fields__user, body .login_fields__password {
            position: relative;
        }
        body .login_fields__submit {
            position: relative;
            top: 17px;
            left: 0;
            width: 80%;
            right: 0;
            margin: auto;
        }
        body .login_fields__submit .forgot {
            float: right;
            font-size: 10px;
            margin-top: 11px;
            text-decoration: underline;
        }
        body .login_fields__submit .forgot a {
            color: #606479;
        }
        body .login_fields__submit input {
            width: 400px;
            height: 60px;
            line-height: 60px;
            border-radius: 50px;
            background: transparent;
            border: 2px solid #ffffff;
            color: #ffffff;
            text-transform: uppercase;
            font-size: 16px;
            -webkit-transition-property: background,color;
            transition-property: background,color;
            -webkit-transition-duration: .2s;
            transition-duration: .2s;
        }
        body .login_fields__submit input:focus {
            box-shadow: none;
            outline: none;
        }
        body .login_fields__submit input:hover {
            color: white;
            background: #ffffff;
            cursor: pointer;
            -webkit-transition-property: background,color;
            transition-property: background,color;
            -webkit-transition-duration: .2s;
            transition-duration: .2s;
            color: #333;
        }

        /* Color Schemes */
        .love {
            position: absolute;
            right: 20px;
            bottom: 0px;
            font-size: 11px;
            font-weight: normal;
        }
        .love p {
            color: white;
            font-weight: normal;
            font-family: 'Open Sans', sans-serif;
        }
        .love a {
            color: white;
            font-weight: 700;
            text-decoration: none;
        }
        .love img {
            position: relative;
            top: 3px;
            margin: 0px 4px;
            width: 10px;
        }

        .brand {
            position: absolute;
            left: 20px;
            bottom: 14px;
        }
        .brand img {
            width: 30px;
        }
        .login_fields__user,.login_fields__password{
            border-radius: 5px;
            width: 400px;
            background:url("${ctxPath}/assets/common/images/input.png") center no-repeat;
            height: 50px;
            line-height: 50px;
            margin-bottom: 20px;
        }
        input::-webkit-input-placeholder{/*Webkit browsers*/
            color:#999;
        }
        　　　
    </style>
    <script>
        if (window != top)
            top.location.replace(location.href);
    </script>
</head>

<body>
<div class="login-wrapper">

    <div class="login-header">
        <p style="margin-left: 50px;margin-top: 30px"><img src="${ctxPath}/assets/common/images/logo1.png"></p>
        <p style="margin-left: 50px;margin-top:10px;font: 14px Noto Sans SC;color:#aaaaaa">${constants.getSystemName()}-商城管理后台系统</p>
    </div>
    <div class='login'>
        <div class='login_title' style="text-align: center">
            <span>用户登录</span>
        </div>
        <div class="page-loading">
            <!--<div class="rubik-loader"></div>-->
            <div class="ball-loader">
                <span></span><span></span><span></span><span></span>
            </div>
        </div>
        <div class='login_fields'>
            <div class='login_fields__user'>
                <div class='icon'>
                    <img alt="" src='${ctxPath}/assets/common/images/user.png'>
                </div>
                <input  name="username" id="username" placeholder='用户名' maxlength="16" type='text' autocomplete="off" />
            </div>
            <div class='login_fields__password'>
                <div class='icon'>
                    <img alt="" src='${ctxPath}/assets/common/images/lock.png'>
                </div>
                <input name="password" id="password" placeholder='密码' maxlength="16" type='password' autocomplete="off" >
            </div>
            @if(constants.getKaptchaOpen()){
            <div class='login_fields__password'>
                <div class='icon'>
                    <img alt="" src='${ctxPath}/assets/common/images/key.png'>
                </div>
                <input name="kaptcha"  id="kaptcha" placeholder='验证码' maxlength="4" type='text'  autocomplete="off">
                <div class="validation" style="opacity: 1;top: -3px;  margin-right: 10px;">
                    <img class="login-captcha" src="${ctxPath}/kaptcha" style="width: 100px; height: 35px;">
                </div>
            </div>
            @}
            <div class='login_fields__submit' style="text-align: center;margin: 0px">
                <input type='button' id="submit" value='登  录'>
            </div>
        </div>
        <div class='success'>
        </div>
    </div>
    <!--<div class=" login-body">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="layui-icon layui-icon-engine"></i>&nbsp;&nbsp;用户登录
            </div>
            <div class="layui-card-body layui-form layui-form-pane" lay-filter="loginForm">
                @if(constants.getTenantOpen()){
                <div class="layui-form-item">
                    <label class="layui-form-label">租户</label>
                    <div class="layui-input-block">
                        <select name="tenantCode" id="tenantCode">
                            <option value="">默认租户</option>
                        </select>
                    </div>
                </div>
                @}
                <div class="layui-form-item">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-block">
                        <input name="username" id="username" value="admin" placeholder="默认账号：admin" type="text" lay-verify="required" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input name="password" id="password" value="111111" placeholder="默认密码：111111" type="password" lay-verify="required" class="layui-input">
                    </div>
                </div>
                @if(constants.getKaptchaOpen()){
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-block">
                        <div class="layui-row inline-block">
                            <div class="layui-col-xs7">
                                <input name="kaptcha" id="kaptcha" type="text" lay-verify="required" placeholder="验证码" class="layui-input">
                            </div>
                            <div class="layui-col-xs5" style="padding-left: 10px;">
                                <img class="login-captcha" src="${ctxPath}/kaptcha">
                            </div>
                        </div>
                    </div>
                </div>
                @}
             &lt;!&ndash;   <div class="layui-form-item">
                    <a href="javascript:;" class="layui-link">帐号注册</a>
                    <a href="javascript:;" class="layui-link pull-right">忘记密码？</a>
                </div>&ndash;&gt;
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" id="submit">登 录</button>
                </div>
              &lt;!&ndash;  <div class="layui-form-item login-other">
                    <label>第三方登录</label>
                    <a href="${ctxPath}/oauth/render/qq"><i class="layui-icon layui-icon-login-qq"></i></a>
                    <a href="${ctxPath}/oauth/render/gitee"><img style="height: 28px;width: 28px" src="${ctxPath}/assets/expand/images/git.png"></a>
                </div>&ndash;&gt;
            </div>
        </div>
    </div>-->

    <div class="login-footer">
        <p style="text-align: center">Copyright © 2020 北京履保科技有限公司</p>
    </div>
</div>

@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "${ctxPath}",
        version: '${constants.getReleaseVersion()}'
    };
</script>
<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>

<script>
    layui.use(['layer', 'form', 'index', 'ax'], function () {
        var $ = layui.jquery;
        var $ax = layui.ax;
        var layer = layui.layer;
        var form = layui.form;
        var index = layui.index;

        // 图形验证码
        $('.login-captcha').click(function () {
            this.src = this.src + '?t=' + (new Date).getTime();
        });

        var errorMsg = "${tips!}";
        if (errorMsg) {
            layer.msg(errorMsg, {icon: 5, anim: 6});
        }

        @if(constants.getTenantOpen()){
            //初始化租户列表
            var ajax = new $ax(Feng.ctxPath + "/tenantInfo/listTenants", function (data) {
                for (var i = 0; i < data.data.length; i++) {
                    var name = data.data[i].name;
                    var code = data.data[i].code;
                    $("#tenantCode").append('<option value="' + code + '">' + name + '</option>');
                }
                form.render();
            }, function (data) {
            });
            ajax.start();
        @}

        //登录操作
        $('#submit').click(function () {
            var username = $('input[name="username"]').val();
            var password = $('input[name="password"]').val();
            var kaptcha = $('input[name="kaptcha"]').val();
            if (username == '') {
                Feng.errorMsg('请输入您的用户名');
                layer.closeAll('loading');
                return;
            } else if (password == '') {
                Feng.errorMsg('请输入密码');
                layer.closeAll('loading');
                return;
            }
            @if(constants.getKaptchaOpen()){
                if (kaptcha == '' || kaptcha.length != 4) {
                    Feng.errorMsg('输入验证码');
                    return;
                }
            @}
            var topIndex = Feng.loading("登录中请稍后....");
            var ajax = new $ax(Feng.ctxPath + "/login", function (data) {
                Feng.info("登录成功!");
                index.clearTabCache();
                top.layer.close(topIndex);
                window.location.href = Feng.ctxPath + "/";
            }, function (data) {
                layer.msg("登录失败！" + data.responseJSON.message, {icon: 5, anim: 6});
                top.layer.close(topIndex);
            },true);
            ajax.set("username", $("#username").val());
            ajax.set("password", $("#password").val());
            @if(constants.getTenantOpen()){
                ajax.set("tenantCode", $("#tenantCode").val());
            @}
            @if(constants.getKaptchaOpen()){
                ajax.set("kaptcha", $("#kaptcha").val());
            @}
            ajax.start();
        });

        $(document).keypress(function (e) {
            // 回车键事件
            if (e.which == 13) {
                $('#submit').click();
            }
        });

    });
</script>


</body>
</html>